import React, { useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import Home from "../home/Home"
import NotFound from "../notFound/NotFound"
import Role from "../right-manage/Role"
import Right from "../right-manage/Right"
import UserManager from '../user-manage/UserManage'
import NewsAdd from "../news-manage/NewsAdd"
import NewsDraft from "../news-manage/NewsDraft"
import NewsPreview from "../news-manage/NewsPreview"
import NewsUpdate from "../news-manage/NewsUpdate"
import Audit from "../audit-manage/Audit"
import AuditList from "../audit-manage/AuditList"
import Unpublished from "../publish-manage/Unpublished"
import Published from "../publish-manage/Published"
import Sunset from "../publish-manage/Sunset"
import http from '../../../util/http'
import { Spin } from 'antd'
import { useSelector } from "react-redux"
export default function NewRoute() {
    // console.log(NewsAdd, NewsDraft, NewsCateGory, Audit, AuditList, Unpublished, Published, Sunset)
    const [BackRouteList, SetBackRouteList] = useState([])
    // 路由路径匹配组件
    const LocalRouteMap = {
        '/home': Home,
        "/user-manage/list": UserManager,
        "/right-manage/role/list": Role,
        "/right-manage/right/list": Right,
        "/news-manage/add": NewsAdd,
        "/news-manage/draft": NewsDraft,
        "/news-manage/preview/:id": NewsPreview,
        "/news-manage/update/:id": NewsUpdate,
        "/audit-manage/audit": Audit,
        "/audit-manage/list": AuditList,
        "/publish-manage/unpublished": Unpublished,
        "/publish-manage/published": Published,
        "/publish-manage/sunset": Sunset
    }
    useEffect(() => {
        Promise.all([
            http.get("/rights"),
            http.get("/children"),
        ]).then(res => {
            SetBackRouteList([...res[0].data, ...res[1].data])
        })
    }, [])
    // console.log(BackRouteList)
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    const checkRoute = (item) => {
        return LocalRouteMap[item.key] && (item.pagepermisson || item.routepermisson)
    };
    const userPagepression = (item) => {
        return rights.includes(item.key)
    };
    const isloading = useSelector(state => {
        // console.log(state)
        return state.isLoading.loading
    })
    return (
        <Spin size="large" spinning={isloading}>
            <Switch>
                {/* <Route path="/home" component={Home}></Route>
            <Route path="/user-manage/list" component={UserManager}></Route>
            <Route path="/right-manage/role" component={Role}></Route>
            <Route path="/right-manage/right" component={Right}></Route> */}
                {
                    BackRouteList.map(item => {
                        if (checkRoute(item) && userPagepression(item)) {
                            return <Route path={item.key} key={item.key} component={LocalRouteMap[item.key]} exact />
                        }
                        return null
                    })
                }
                <Redirect from="/" to="/home" exact></Redirect>
                {
                    BackRouteList.length > 0 && <Route path="*" component={NotFound} ></Route>
                }
            </Switch>
        </Spin>
    )
}